<template>
	<view class="prospect-container ">
		<view class="prospect-content">
			<!-- 头像 -->
			<view class="prospect-item-bar flex-column-center">
				<image :src="someone_dataset.portraitPic" mode="" class="prospect-portrait-img"></image>
				<uni-icons class="prospect-portrait-icon" type="plusempty" size="12" color="#fff"></uni-icons>
			</view>
			<!-- 点赞 -->
			<view class="prospect-item-bar flex-column-center">
				<uni-icons class="prospect-icon" type="heart-filled" size="25" :color="is_fabulous?'#d24630':'#fff'"
					@click="handleFabulousClick">
				</uni-icons>
				<text>{{someone_dataset.fabulous}}</text>
			</view>
			<!-- 收藏 -->
			<view class="prospect-item-bar flex-column-center">
				<uni-icons class="prospect-icon" type="star-filled" size="25" :color="is_collection?'#d24630':'#fff'"
					@click="handleCollectionClick">
				</uni-icons>
				<text>{{someone_dataset.collection}}</text>
			</view>
			<!-- 分享 -->
			<view class="prospect-item-bar flex-column-center">
				<uni-icons class="prospect-icon" type="redo-filled" size="25" color="#fff" @click="handleShareClick">
				</uni-icons>
				<text>{{someone_dataset.share}}</text>
			</view>
			<!-- 评论 -->
			<view class="prospect-item-bar flex-column-center">
				<uni-icons class="prospect-icon" type="chat-filled" size="25" color="#fff" @click="handleCommentClick"></uni-icons>
				<text>{{someone_dataset.comment}}</text>
			</view>
			<!-- 联系 -->
			<view class="prospect-item-bar flex-column-center">
				<uni-icons class="prospect-icon" type="chatboxes-filled" size="25" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['someone_dataset'],
		data() {
			return {
				is_fabulous: false,
				is_collection: false
			}
		},
		methods: {
			// 点赞
			handleFabulousClick() {
				this.is_fabulous = !this.is_fabulous
				if (this.is_fabulous) {
					this.someone_dataset.fabulous++
				} else {
					this.someone_dataset.fabulous--
				}
			},
			// 收藏
			handleCollectionClick() {
				this.is_collection = !this.is_collection
				if (this.is_collection) {
					this.someone_dataset.collection++
				} else {
					this.someone_dataset.collection--
				}
			},
			// 控制弹窗
			handleShareClick() {
				this.$bus.$emit('controlPopup', 'share_popup')
			},
			handleCommentClick(){
				this.$bus.$emit('controlPopup', 'comment_popup')
			}
		}
	}
</script>

<style lang="scss">
	.prospect-container {
		position: absolute;
		bottom: 250rpx;
		right: 20rpx;
		display: inline-block;

		.prospect-content {
			.prospect-item-bar {
				margin-top: 30rpx;

				// 头像
				.prospect-portrait-img {
					width: 70rpx;
					height: 70rpx;
					border: 2px solid #fff;
					border-radius: 50%;
				}

				// 头像下的+
				.prospect-portrait-icon {
					z-index: 1;
					margin-top: -18rpx;
					padding: 5rpx;
					background-color: #fc0104;
					border-radius: 50%;
				}

			}
		}
	}
</style>
